<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link href="static/index/css/common.css" type=text/css rel=stylesheet>
    <script src="static/index/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
   
    <script src="static/index/js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/index/js/hammer.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/index/js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/index/js/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>

    </script>
    <style >
        
        .map{
            /* padding: 3vw 3vw 5vw 3vw; */
            display: flex;
            flex-flow: wrap;
        }
        .picture{
            width: 100%;
            /* height: 100px; */
            margin-right: 3vw; 
            display: flex;
            flex-wrap: wrap;
        }
        .picture img{
            width: 30vw;
            height: 30vw;
            margin: 1vw 1vw;
        }

        #choose-btn{
            display: flex;
            width: 20vw;
            height: 20vw;
            border: solid 0.5vw rgb(207, 207, 207);
            color: rgb(207, 207, 207);
            font-size:20vw;
            font-weight: bold;
            text-align: center;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
            margin: 0 1vw;
            font-weight: normal;
        }
        #file{
            display: none;
        }
        .updata{
            background-color: rgb(0, 102, 255);
            color: white;
            width: 100px;
            height: 30px;
        }
        .b{
            width: 100px;
            height: 100px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 5px;
            margin: 5px
        }
        .b img{
            width: 100%;
            height: 100%;

        }
        body{
            margin: 0;
            text-align: center;
            box-sizing: border-box;
        }
        .A{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .X{
            background-color: rgb(0, 102, 255);;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 50%;
            border: none;
        }
        .c{
            width: 80%;
            height: 30px;
            margin: 5px 0;
        }
        #choose-btn{
            display: flex;
            width:100px;
            height: 100px;
            border: solid 0.5vw rgb(207, 207, 207);
            color: rgb(207, 207, 207);
            font-size:20vw;
            font-weight: bold;
            text-align: center;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
            /* padding: 5px; */
            margin: 10px 5px;
            font-weight: normal;
        }
        #file-fileld{
            display: none;
        }
        .head{
            width: 100%;
            background-color: rgb(0, 102, 255);
            font-size: 6vw;
            color: white;
            text-align: center;
        }
        .head img{
            width: 40vw;
            height: 30vw;
        }
    </style>
</head>

<body>

<div  style="min-height:1px;">         
    <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">    
        <div class="" style="height:600px;margin:10px auto;background-color:#FFFFFF;overflow: auto;border-radius:4px;"><button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;z-index:99999" >保存封面</button>
            <div id="clipArea" style="margin:10px;height: 520px;overflow:auto"></div>
            <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                
            </div>
        </div>
    </div>
</div>





    <div class="head">
        <img src="static/admin/images/早早番茄白.png">
    </div>
  <div class="A aaa" >
    <form action="{:url('uploadAction')}" method="POST" enctype="multipart/form-data">
        <div class="b" >
            <input value="早早番茄白.png" type="hidden" class="hid">
           
            <img src="" alt="" id="img">
        </div>
        <div class="map">
            <label for="file" id="choose-btn" >
                <span>+</span>
            </label>
            <input type="file" accept="image/*" id="file" >
        </div>
        <div>
             <input type="submit" class="updata" value="确认上传验证" />
        </div>
       <input type="hidden" id="image" name="image"/>
        <input type="hidden" name="user_id" value="{$userinfo.user_id}"/>
    </form>
  </div>
   
  <div style="text-align: left;margin-top: 10vw;margin-left: 10vw;">
      <b>温馨提示:</b>
      <br>
      1.图片尺寸为640*480左右
      <br>
      2.图片中只有一个人脸
      <br>
      3.图片中人脸端正
      <br>
      4.图片中人脸占图片30%以上
      <br>
      5.图片大小不超过400K
  </div>

</body>
</html>
<script type="text/javascript">

//上传封面
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [420, 320],// 截取框的宽和高组成的数组。默认值为[260,260]
    outputSize: [420, 320], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
    //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
    file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
    view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
    loadStart: function() {
        // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
        $('.cover-wrap').fadeIn();
        console.log("照片读取中");
    },
    loadComplete: function() {
         // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
        console.log("照片读取完成");
    },
    //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
    clipFinish: function(dataURL) {
        document.getElementById("img").src=dataURL;
        document.getElementById("image").value=dataURL;
        $('.cover-wrap').fadeOut();   
    }
});


//clipArea.destroy();
</script>